<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge";/>
    <link rel="stylesheet" href="./static/layui/layui.css" media="all">
    <link rel="stylesheet" href="./static/css/certain.css">
    <title>购物车</title>
</head>

<body>
    <!-- header s -->
    <div class="header">
        <ul class="header_wrapper clearfix">
            <li class="logo">
                EASY-RD
            </li>
            <li class="header_nav">
                <a href="javascript:void(0)"> 塑料零件加工</a>
            </li>
            <li class="header_nav">
                <a href="javascript:void(0)"> 金属零件加工</a>
            </li>
            <li class="header_nav">
                <a href="javascript:void(0)">模具加工</a>
            </li>
            <li class="header_nav">
                <a href="javascript:void(0)"> 零件购买</a>
            </li>
            <li class="header_nav">
                <a href="javascript:void(0)">资讯</a>
            </li>
            <li class="header_border">
                <a href="javascript:void(0)">在线报价</a>
            </li>
            <li class="header_icon">
                <div class="header_red_dot">1</div>
                <img src="./static/img/index/nav_shopping_normal@3x.png" alt="">
            </li>
            <li class="zhuce login_base">
                <a href="javascript:void(0)"> 注册</a>
            </li>
            <li class="header_line">
                |
            </li>
            <li class="denglu login_base">
                <a href="javascript:void(0)">登录</a>
            </li>
        </ul>
    </div>
    <!--header e  -->
    <!-- flow s-->
    <div class="flow change_flow">
        <ul class="flow_wrapper">
            <li class="logo">
                <a href="javascript:void(0);"> EASY-RD</a>
            </li>
            <li>
                <a href="javascript:void(0);"> 塑料零件加工</a>
            </li>
            <li>
                <a href="javascript:void(0);">金属零件加工</a>
            </li>
            <li>
                <a href="javascript:void(0);">摸具加工</a>
            </li>
            <li>
                <a href="javascript:void(0);">零件购买</a>
            </li>
            <li>
                <a href="javascript:void(0);">咨询</a>
            </li>
            <li>
                <a href="javascript:void(0);">在线报价</a>
            </li>
            <li class="flow">
                <a href="javascript:void(0);">
                    <div class="inner_flow">
                        <div class="header_red_dot">1</div>
                        <img src="./static/img/index/nav_shopping_normal@3x.png" alt="">
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!-- flow e -->
    <!-- 购物车 haeder -->
    <div class="gouwuce_header">
        <p class="gouwuce_list_header">
            我的购物流程
        </p>
        <ul class="gouwuce_list o_f_h">
            <li class="list_name_cover first_covert">
                <p class="circle_list">
                    01
                </p>
                <p class="list_w">
                    购物车
                </p>
            </li>

            <li class="goueuce_arrow">
                <img src="./static/img/log_2.png" alt="">
            </li>

            <li class="list_name_cover">
                <p class="circle_list">
                    02
                </p>
                <p class="list_w">
                    确认订单
                </p>
            </li>

            <li class="goueuce_arrow">
                <img src="./static/img/log_2.png" alt="">
            </li>

            <li class="list_name_cover">
                <p class="circle_list circle_list_change_c">
                    03
                </p>
                <p class="list_w">
                    支付
                </p>
            </li>

            <li class="goueuce_arrow">
                <img src="./static/img/log_2.png" alt="">
            </li>

            <li class="list_name_cover">
                <p class="circle_list circle_list_change_c">
                    04
                </p>
                <p class="list_w">
                    完成
                </p>
            </li>

        </ul>
    </div>
    <!-- 购物车 haeder -->


    <!-- main s -->
    <div class="contain_certain">
        <!-- certain_1 -->
        <div class="main_certain_1">
            <p class="gouwuce_list_header change_gouwuce_list_header">
                确认收货地址
            </p>
            <div class="bg_m_d">
                后台管理地址
            </div>
            <!-- address s -->
            <ul class="mian_certain_1_address">
                <li>
                    <input type="radio" name="address" value="1" />
                    <p>
                        北京省 北京市 东城区 说的哈哈大坏蛋 （哈哈 收) 13728021555
                    </p>

                    <a href="#" class="change">
                        修改
                    </a>
                </li>
            </ul>
            <!-- address e -->
            <!-- add -->
            <div href="#" class="add_new_address _m_l_82">
                +使用新的地址
            </div>
            <!-- add -->
        </div>
        <!-- certain_2-->

        <!--certain_2  -->
        <div class="main_certain_2">
            <p class="gouwuce_list_header change_gouwuce_list_header">
                配送方式
            </p>
            <ul class="o_f_h _m_l_82">
                <li class="btn_2 f_l">
                    TNT
                </li>
                <li class="btn_2 f_l btn_2_act m_l_20">
                    TNT
                </li>
            </ul>
        </div>

        <!--certain_2  -->


        <!--certain_3  -->
        <div class="main_certain_3">
            <p class="gouwuce_list_header change_gouwuce_list_header">
                是否需要单据
            </p>
            <ul class="o_f_h _m_l_82">
                <li class="btn_2 f_l">
                    是
                </li>
                <li class="btn_2 f_l btn_2_act m_l_20">
                    否
                </li>
            </ul>
        </div>

        <!--certain_3  -->

        <!--certain_3  -->
        <div class="main_certain_3">
            <p class="gouwuce_list_header change_gouwuce_list_header">
                订单金额
            </p>
            <ul class="o_f_h _m_l_82">
                <li>
                    物流费用：100.00美元
                </li>
                <li>
                    商品：2件
                </li>
                <li>
                    总金额: 1266.00 美元
                </li>
                <li class="btn_2 m_t_15">
                    确认订单
                </li>
            </ul>
        </div>

        <!--certain_3  -->


        <!-- main table s -->
        <div class="wrapper_table">
            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="70">
                    <col width="100">
                    <col width="100">
                </colgroup>
                <thead>
                    <tr>
                        <th>商品</th>
                        <th>详情</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计（美元）</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="position: relative;">
                            <img src="./static/img/index/pho_3D_model@3x.png" alt="" style="height: 70px;position: absolute;width: 140px;display:block;margin: 0 auto;left:95px;">
                            <p style="text-align: center;font-size: 14px;position: absolute;top:92px;left:83px;">
                                53ad8f8947085.stp
                            </p>
                            <p style="text-align: center;font-size: 14px;top:70px;visibility: hidden;">
                                53ad8f8947085.stp
                            </p>
                        </td>
                        <td>工艺: CNC 材料:ABS（米黄） 表面处理:无 UV:否 表面印刷:无 发货周期:3~5工作日</td>
                        <td>￥1372.00</td>
                        <td>
                            <ul class="base_opt_c_wrapper" style="overflow: hidden;
                            margin-top: 7px;">
                                <li class="base_opt_c reduce base_opt_c_top">
                                    -
                                </li>
                                <li class="num">
                                    1
                                </li>
                                <li class="base_opt_c plus">
                                    +
                                </li>
                            </ul>
                        </td>
                        <td style="color:#008FFF;">￥1372.00</td>
                    </tr>

                </tbody>
            </table>
        </div>


        <!-- main tablee -->
    </div>
    <!-- main e-->



    <!-- footer s -->
    <div class="footer">
        <div class="footer_inner o_f_h">
            <div class="footer_inner_header o_f_h">

                <ul class="footer_inner_left o_f_h">
                    <li>
                        <a href="">
                            塑料零件加工
                        </a>
                    </li>
                    <li class="m_l_54">
                        <a href="">
                            金属零件加工
                        </a>
                    </li>
                    <li class="m_l_54">
                        <a href="">
                            模具加工
                        </a>
                    </li>
                    <li class="m_l_54">
                        <a href="">
                            资讯
                        </a>
                    </li>
                    <li class="m_l_54">
                        <a href="">
                            应用展示
                        </a>
                    </li>
                </ul>

                <div class="footer_inenr_right">
                    EASY-RD
                </div>
            </div>

            <div class="footer_middle">
                友情链接：
                <a href="">博实永道深圳3d打印服务</a>
                <a href="">91打印</a>
                <a href="">蓝鲸工业设计</a>
                <a href="">360VR导航无人机</a>
                <a href="">世界新奇谷大数据</a>
                <a href="">重量检测机</a>
                <a href="">智能汽车</a>
                <a href="">3D打印资源库</a>
                <a href="">全球玻璃机械网</a>
            </div>

            <div class="footer_last_div">
                Copyright © 2018 云工厂 XXXXXXXX.com | 粤ICP备000000号-1
            </div>

        </div>
    </div>
    <!-- footer e -->

    <!-- masks -->
    <div class="mask">
        <form class="form layui-form">
            <p class="form_header">
                <span>添加新的收货地址</span>
            </p>

            <div class="main_form">
                <div class="layui-form-item">
                    <label class="layui-form-label">收货名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="收货名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">收货人</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="收货人" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">联动选择框</label>
                    <div class="layui-input-inline">
                        <select name="quiz1">
                            <option value="">请选择省</option>
                            <option value="浙江" selected="">浙江省</option>
                            <option value="你的工号">江西省</option>
                            <option value="你最喜欢的老师">福建省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="quiz2">
                            <option value="">请选择市</option>
                            <option value="杭州">杭州</option>
                            <option value="宁波" disabled="">宁波</option>
                            <option value="温州">温州</option>
                            <option value="温州">台州</option>
                            <option value="温州">绍兴</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="quiz3">
                            <option value="">请选择县/区</option>
                            <option value="西湖区">西湖区</option>
                            <option value="余杭区">余杭区</option>
                            <option value="拱墅区">临安市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="quiz3">
                            <option value="">请选择县/区</option>
                            <option value="西湖区">西湖区</option>
                            <option value="余杭区">余杭区</option>
                            <option value="拱墅区">临安市</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">详细地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="详细地址" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">电话号码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" lay-verify="pass" placeholder="电话号码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="color:#008FFF;">如：0755-8888888</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="邮箱地址" class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" lay-submit="" lay-filter="demo1" style="   margin-top: 30px;float:right;background-color:#008FFF;color:#fff;width: 60px;height: 24px;line-height: 20px;text-align: center;border:1px solid #008FFF;">保存</button>
                <a href="#" id="close_mask" class="close_msk" style="float:right;background-color:#fff;color:#333;border:1px solid #333;width: 60px;height: 24px;line-height: 20px;text-align: center;">
                    取消
                </a>
            </div>
            </from>
    </div>
    <!-- mask e -->

</body>
<script src="./static/layui/layui.js" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- http://www.layui.com/demo/form.html -->
<!-- http://www.layui.com/doc/base/faq.html#jquery -->
<script>

    layui.use(["jquery", 'form'], function () {
        var $ = layui.$
        var close_mask = $("#close_mask");
        var add_new_address = $(".add_new_address").eq(0);
        var mask = $(".mask").eq(0)
        add_new_address.click(function () {
            mask.css("display", "block")
        })
        close_mask.click(function () {
            mask.css("display", "none")

        })
    });
</script>
</script>

</html>